<template>
  <div class="Messages">
    <div class="topheader">
      <!-- <div class="Theadermain">
        <div class="headerimg" @click="comeback">
          <img src="../../../assets/img20.png" width="100%" />
        </div>
        <div>微信积分系统</div>
        <div style="width: 0.5rem; margin-left: 10px"></div>
      </div> -->
    </div>
    <!-- <div class="allmain">
        <div class="main_tImg"><img src="../../../assets/img1.png" alt=""></div>
        <div class="main_title">感谢您的参与！</div>
        <div class="main_title">系统标题</div>
        <div class="main_time">发布时间：2021.10.11 15:00</div>
        <div>
            <div class="main_titleP">活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容</div>
            <div class="main_tImg"><img src="../../../assets/img1.png" alt=""></div>
            <div class="main_titleP">活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容</div>
        </div>
        <div class="main_time">审评时间：2021.10.11 15:00</div>

    </div> -->
    <div class="mainlat">
      <div v-html="video.content"></div>
      <div class="main_time">发布时间：{{ video.createTime }}</div>
    </div>
    <div class="xaunZe" v-for="(item, index) in ligeList" :key="index">
      <div>{{ item.content }}</div>
      <div class="alldoller">
        <div>{{ item.amount }}票</div>
        <div>{{ Number((item.amount / sumLL) * 100).toFixed(2) }}%</div>
      </div>
    </div>
    <!-- <div class="xaunZe">
      <div>不同意</div>
      <div class="alldoller">
        <div>16票</div>
        <div>15.7%</div>
      </div>
    </div> -->
    <div class="zal">投票截止：2021.10.11 15:00</div>
    <div class="but">
      <div class="lookasd">感谢您的参与!</div>
      <el-button @click="comeback">返回主页</el-button>
      <!-- <div class="color_i" @click="showPic">
        <i class="el-icon-share"></i>分享
      </div> -->
    </div>
  <!--  <div
      style="
        position: fixed;
        z-index: 1;
        min-height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        background-color: white;
        opacity: 0.55;
      "
      @click="showPic"
      v-show="diaIsShow"
    ></div> -->
    <div
      style="
        position: fixed;
        top: 25vh;
        height: calc(80vw * 1.5);
        width: 80vw;
        margin-left: 10vw;
        padding-top: 10px;
        border-radius: 25px;
        border: 2px solid #73ad21;
        background-color: white;
        text-align: center;
        z-index: 2;
        box-shadow: 10px 10px 5px #888888;
      "
      v-show="diaIsShow"
    >
      长按图片保存海报
      <div
        ref="imageTofile"
        :style="{
          height: 'calc(70vw*1.5)',
          width: '70vw',
          overflow: 'hidden',
          'margin-left': '5vw',
        }"
        v-show="isShow"
      >
        <img
          style="
            height: calc(70vw * 1.5);
            width: 70vw;
            position: absolute;
            left: 5vw;
          "
          :src="backgroundBase64"
        />
        <img
          style="
            height: calc(70vw * 0.25);
            width: calc(70vw * 0.25);
            margin: calc(80vw * 0.875) -10vw;
            position: absolute;
            z-index: 999;
          "
          :src="QRcodeBase64"
        />
      </div>

      <img
        :style="{
          height: 'calc(70vw*1.5)',
          width: '70vw',
        }"
        :src="outUrl"
        v-show="!isShow"
      />
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import request from "@/utils/request";
import { Debounce } from "@/utils/public";

export default {
  name: "thanks",
  data() {
    return {
      changeSex: "0",
      ligeList: [],
      video: "",
      // 生成图片
      backgroundBase64: "",
      QRcodeBase64: "",
      outUrl: "",
      isShow: true,
      diaIsShow: false,
      sumLL: null,
    };
  },
  created() {
    this.getImage();
    this.video = JSON.parse(this.$route.query.row);
    // console.log(this.video);
    this.showpaceTic();
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    comeback() {
      this.$router.push({ name: "index" });
    },
    getImage() {
      console.log("生成海报");
      let query = { userId: 1, page: "jifen" };
      request({
        url: "/generator/poster/front/poster",
        method: "get",
        params: query,
      }).then((response) => {
        this.backgroundBase64 =
          "data:image/png;base64," + response.poster.backPic;
        this.QRcodeBase64 = "data:image/png;base64," + response.qrcode;
        // setTimeout(()=>this.toImage(), 100);
      });
    },
    showpaceTic() {
      let query = { voteId: this.video.id };
      request({
        url: "/generator/option/front/list",
        method: "get",
        params: query,
      }).then((response) => {
        console.log(response);
        this.sumLL = response.sum;
        this.ligeList = response.list;
        this.changeSex = response.list[0].id;
        // alert(JSON.stringify(response.token));
      });
    },
    showPic() {
      this.diaIsShow = !this.diaIsShow;
      // this.getImage();
      this.backgroundBase64;
      this.QRcodeBase64;
      if (this.diaIsShow) {
        this.getNummo();
        setTimeout(() => this.toImage(), 100);
      } else {
        this.isShow = true;
      }
    },
    getNummo() {
      request({
        url: "/generator/poster/front/posterPoint",
        method: "get",
      }).then((response) => {
        console.log(response);
      });
    },
    // showPic() {
    //   this.diaIsShow = !this.diaIsShow;
    //   this.getImage();
    //   if (this.diaIsShow) {
    //     setTimeout(() => this.toImage(), 100);
    //   }else {
    //     this.isShow = true;
    //   }
    // },
    toImage() {
      // TODO开始生成
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        // TODO结束生成
        let url = canvas.toDataURL("image/png");
        this.outUrl = url;
        console.log(this.outUrl);
        if (this.outUrl) {
          this.isShow = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.topheader {
  width: 100%;
  background-color: black;
}
.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}
.allmain {
  padding: 20px;
  /* border: 1px solid red; */
}
.main_tImg {
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  margin: 80px 0 20px 0;
}
.main_title {
  font-weight: bold;
  text-align: center;
}
.but {
  /* border: 1px solid red;  */
  padding: 40px 0;
  text-align: center;
}
.color_i {
  color: #f6a15d;
  padding-top: 10px;
}
.mainlat {
  padding: 20px;
  border: 5px solid #f0f5f8;
}
.main_time {
  color: #aeaeb6;
  font-size: 14px;
  padding: 5px 0;
}
.xaunZe {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #f0f5f8;
}
.alldoller {
  /* border: 1px solid red; */
  width: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lookasd {
  padding-bottom: 40px;
}
.zal {
  color: #aeaeb6;
  padding: 20px;
}
</style>